<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" :disabled="finished">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        offset="50"
        :immediate-check="false"
      >
        <Articleitem
          v-for="item in Articliebiao"
          :key="item.art_id"
          :obj="item"
          @dislike="dellislike"
          @reports="reportsFn"
          @click.native="$router.push(`/article/${item.art_id}`)"
        ></Articleitem>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import Articleitem from '@/views/Home/components/ArticleItem.vue'
import { getArticlelListAPI, ArticlesNolike, articleReportsAPI } from '@/api/home.js'
import { Notify } from 'vant'
export default {
  data() {
    return {
      Articliebiao: [],
      loading: false, // 当前这一页的加载状态,false表示可以加载,true表示加载完成
      finished: false, // 整个列表是否全部加载完毕
      nexttime: Date.now(),
      isLoading: false
    }
  },
  components: {
    Articleitem
  },
  async created() {
    // 进来调用接口
    this.getArticleList()
  },
  props: {
    chID: {
      type: Number,
      default: 0
    }
  },
  methods: {
    // 请求数据方法
    async getArticleList() {
      // resp接受  await 接口返回的结果
      const resp = await getArticlelListAPI({
        // 传入接口需要的值
        channelId: this.chID,
        timestamp: this.nexttime
      })
      console.log(resp)
      // 把哪会只需要的数据对象解构赋值
      const { pre_timestamp, results } = resp.data.data
      // 判断如果里面为空 或者长度小于10 让没有更多触发  结束函数执行
      if (pre_timestamp === null || results.length < 10) {
        this.finished = true
        return
      }
      // 把请求回来的数据 赋值给变量
      this.nexttime = pre_timestamp
      // 请求一次数据 拼接给变量数组
      this.Articliebiao = [...this.Articliebiao, ...results]
      // 滚动下拉条触发lode事件 会把logding改成true 数据更新完成后应该改为false
      this.loading = false
    },
    onLoad() {
      if (this.Articliebiao.length > 0) { this.getArticleList() }
    },
    async onRefresh() {
      const resp = await getArticlelListAPI({ channelId: this.chID, timestamp: this.nexttime })

      if (resp.data.data.results.length < 10 || resp.data.data.pre_timestamp === null) {
        this.finished = true
        this.isLoading = false
        this.$toast('没有更多数据')
        return
      }
      this.nexttime = resp.data.data.pre_timestamp
      this.Articliebiao = resp.data.data.results
      this.isLoading = false
    },
    async dellislike(obj) {
      try {
        await ArticlesNolike({ artid: obj.art_id })
        const index = this.Articliebiao.findIndex(item => item.art_id === obj.art_id)
        this.Articliebiao.splice(index, 1)
        Notify({ type: 'success', message: '反馈成功' })
      } catch (err) {
        Notify({ type: 'warning', message: '反馈失败-联系程序员' })
      }
    },
    async reportsFn(obj, type) {
      try {
        await articleReportsAPI({
          target: obj.art_id,
          type: type,
          remark: '就是其他问题'
        })
        Notify({ type: 'success', message: '反馈成功' })
      } catch (err) {
        Notify({ type: 'warning', message: '反馈失败-联系程序员' })
      }
    }
  }
}
</script>

<style lang="less" scoped></style>
